<template>
<div class="registry-container">

  <div class="registry-main">
    <div class="registry-title-dialog">
      <div class="title-icon">
       <i class="fa fa-address-card-o" aria-hidden="true"></i>
      </div>
      <div class="title-txt">
        <h3>马鞍山籍大学生人才库-注册</h3>
      </div>
    </div>
    <div class="">
      <el-form :model="registryForm" status-icon :rules="rules2" ref="registryForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="登录名" prop="username">
          <el-input v-model="registryForm.username"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="registryForm.name"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="registryForm.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input type="password" v-model="registryForm.checkPass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mobilePhone">
          <el-input v-model.number="registryForm.mobilePhone"></el-input>
        </el-form-item>

        <div class="text-center question-tip">提示：填写问题，可用于忘记密码时，找回密码。</div>
        <div v-for="(item, index) in questionList" :key="item.type">
          <el-form-item :label="'问题'+(index+1)" :prop="item.question">
            <el-row>
              <el-col :span="12">
                <el-select class="filter-item" v-model="item.id"   placeholder="请选择问题">
                  <el-option  v-for="qItem in  item.list" :key="qItem.id" :label="qItem.question" :value="qItem.id"> </el-option>
                </el-select>
              </el-col>
              <el-col :span="12">
                <el-input v-model.number="item.answer" placeholder="请输入自定义答案"></el-input>
              </el-col>
            </el-row>
          </el-form-item>
        </div>

        <el-form-item>
          <el-row>
            <el-col :span="15">
              <el-button type="primary" style="width:50%" @click="submitForm('registryForm')">注册</el-button>
            </el-col>
            <el-col :span="9" class="text-right">
               <a href="#/login" class="registry-login"><span>使用已有账户登录</span></a>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </div>
    <div class="clearfix"></div>
  </div>

  <el-dialog title="第三方验证" :visible.sync="showDialog">
    邮箱登录成功,请选择第三方验证
    <social-sign></social-sign>
  </el-dialog>

</div>
</template>

<script>
import socialSign from './socialsignin';
import {
  getQuestionListObj,
  registrySubmitObj
} from 'api/admin/registry/index';
export default {
  components: {
    socialSign
  },
  name: 'registry',
  data() {
    var checkAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('年龄不能为空'));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error('请输入数字值'));
        } else {
          if (value < 18) {
            callback(new Error('必须年满18岁'));
          } else {
            callback();
          }
        }
      }, 1000);
    };
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.registryForm.checkPass !== '') {
          this.$refs.registryForm.validateField('checkPass');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.registryForm.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      registryForm: {
        username: '',
        name: '',
        password: '',
        checkPass: '',
        mobilePhone: ''
      },
      questionList:[],
      rules2: {
        password: [
          { required: true, validator: validatePass, trigger: 'blur' },
          {
            min: 5,
            max: 20,
            message: '长度在 5 到 20 个字符',
            trigger: 'blur'
          }
        ],
        checkPass: [
          { required: true, validator: validatePass2, trigger: 'blur' }
        ],
        username: [
          {
            required: true,
            message: '请输入登录名',
            trigger: 'blur'
          },
          {
            min: 1,
            max: 20,
            message: '长度在 1 到 20 个字符',
            trigger: 'blur'
          }
        ],
        name: [
          {
            required: true,
            message: '请输入姓名',
            trigger: 'blur'
          },
          {
            min: 1,
            max: 20,
            message: '长度在 1 到 20 个字符',
            trigger: 'blur'
          }
        ],
        mobilePhone:[
          {
            pattern: /^((\d{3,4}-\d{7,8})|(\d{11}))$/,
            message: '电话格式不正确',
            trigger: 'blur'
          }
        ],
      },
      //login那边拷贝过来的，需要按需修改
      activeName: 'second',
      loginForm: {
        username: '',
        password: ''
      },
      loginRules: {
        username: [{
          required: true,
          message: '账户不能为空',
          trigger: 'blur'
        },
        {
          min: 3,
          max: 20,
          message: '长度在 3 到 20 个字符',
          trigger: 'blur'
        }],
        password: [{
          required: true,
          trigger: 'blur',
          validator: validatePass
        }]
      },
      loading: false,
      showDialog: false
    };
  },
  created() {
    this.getQuestionList();
  },
  methods: {
      submitForm(formName) {
        var that = this;
        this.$refs[formName].validate((valid) => {
          if (valid) {
            var answerList  = this.parseToAnswerList(that.questionList);
            //移除属性
            delete this.registryForm.checkPass;
            var obj = {
              user: JSON.stringify(this.registryForm),
              userAnswerList:JSON.stringify(answerList)
            }
            // Object.assign({},this.registryForm, answerList);
            // JSON.stringify(obj);
            registrySubmitObj(obj).then(() => {
              var second = 3;
              var int = self.setInterval(function(){
                  if(second <= 0){
                    window.clearInterval(int);
                    //注册成功后，跳转到登录页
                    that.$router.push({
                        path: '/login'
                    });
                  }
                  second--;
                  $('#regMsgId').find('b').text(second);
              },1000);
              this.$notify({
                title: '成功',
                dangerouslyUseHTMLString: true,
                message: '<div id="regMsgId">注册成功, <b>' + second +'</b>秒后跳转到登录页...<div>',
                type: 'success',
                duration: 3000
              });

            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      parseToAnswerList(questionList){
        var list = [];
        questionList.forEach(item => {
          //问题类型
          list.push({
            questionId: item.id,
            questionType: item.type,
            questionAnswer: item.answer
          });
        });
        return list;
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      getQuestionList() {
        var _this = this;
        getQuestionListObj().then(response => {
            // this.questionList = response.data;
            var obj = response.data;
            for(let i in obj){
                _this.questionList.push({
                  type: i,
                  list: obj[i]
                });
            }
        });
    },
  },
  destroyed() {
    // window.removeEventListener('hashchange', this.afterQRScan);
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
@import "src/styles/mixin.scss";
.tips {
    font-size: 14px;
    color: #fff;
    margin-bottom: 5px;
}
.registry-main{
    width: 500px;
    margin: 0 auto;
}
.question-tip{
  padding-left: 100px;
}
/*登陆框样式*/
.registry-title-dialog{
    // width: 400px;
    padding: 30px 80px;
    text-align: center;
    .title-icon{
      color: #8398ac;
      i{
        font-size: 48px;
      }
    }
    .title-txt{
      color: #8398ac;
    }
}
.text-right{
  text-align: right;
}

.registry-container {
    background-image: url('../../assets/svg/login-bg.svg');
    background-repeat: no-repeat;
    background-position: center 110px;
    background-size: 100%;

    @include relative;
    height: 100%;
    // height: 100vh;
    background-color: #f0f2f5;
    // input:-webkit-autofill {
    //     -webkit-box-shadow: 0 0 0 1000px #293444 inset !important;
    //     -webkit-text-fill-color: #fff !important;
    // }
    // input {
    //     background: transparent;
    //     border: 0;
    //     -webkit-appearance: none;
    //     border-radius: 0;
    //     padding: 12px 5px 12px 15px;
    //     color: #eeeeee;
    //     height: 47px;
    // }
    // .el-input {
    //     display: inline-block;
    //     height: 47px;
    //     width: 85%;
    // }
    .svg-container {
        padding: 6px 5px 6px 15px;
        color: #889aa4;
    }
    .title {
        font-size: 26px;
        font-weight: 400;
        color: #eeeeee;
        margin: 0 auto 40px;
        text-align: center;
        font-weight: bold;
    }
    .registry-form {
        // position: absolute;
        // left: 0;
        // right: 0;
        // width: 400px;
        padding: 35px 35px 15px;
        // margin: 120px auto;
    }
    .el-form-item {
        border: 1px solid rgba(255, 255, 255, 0.1);
        // background: rgba(0, 0, 0, 0.1);
        border-radius: 5px;
        color: #454545;
    }
    .forget-pwd {
        color: #fff;
    }
    .registry-login{
      color: #1890ff;
    }
}
</style>
